<template>
  <div class="wrapper">
    <el-card>
      <div class="rowDiv" style="padding: 0">
        <div class="row-left">
          状态：<el-select
            clearable
            @change="getOrderlist"
            v-model="state.status"
          >
            <el-option label="待审核" value="10"></el-option>
            <el-option label="已通过" value="1"></el-option>
            <el-option label="已拒绝" value="0"></el-option>
          </el-select>
        </div>
        <div class="row-right">
          <searchDiv
            :placeholder="state.placeholder"
            @searchClick="searchClick"
          ></searchDiv>
        </div>
      </div>
      <el-table :data="state.tableData" style="width: 100%">
        <el-table-column prop="id" label="充值单号"> </el-table-column>
        <el-table-column prop="customer" label="门店名称"> </el-table-column>
        <el-table-column prop="serial" label="门店编号"> </el-table-column>
        <el-table-column prop="bd" label="客户经理"> </el-table-column>
        <el-table-column prop="op" label="运营经理"> </el-table-column>
        <el-table-column prop="amount" label="充值金额"> </el-table-column>
        <el-table-column prop="create_time" label="申请时间"> </el-table-column>
        <el-table-column prop="verify_time" label="审核时间"> </el-table-column>
        <!-- <el-table-column prop="zip" label="审核人"> </el-table-column> -->
        <el-table-column prop="verify_status_display" label="审核状态">
        </el-table-column>
        <el-table-column prop="verify_note" label="审核说明"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button
              @click.native.prevent="approve(scope.row)"
              type="text"
              size="small"
            >
              审核
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Page
        v-if="state.totalPage"
        @changePage="changePage"
        :totalPage="state.totalPage"
      ></Page>
    </el-card>
    <el-drawer
      title="充值审核详情"
      v-model="state.drawer"
      :direction="direction"
      :before-close="handleClose"
      destroy-on-close
    >
      <div class="conTxt">
        <el-descriptions title="1、审核状态">
          <el-descriptions-item
            ><el-tag type="warning" v-if="state.verify_status == 10"
              >待审核</el-tag
            >
            <el-tag type="success" v-else-if="state.verify_status == 1"
              >已通过</el-tag
            >
            <el-tag type="info" e-else>已拒绝</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="2、门店信息" :column="2">
          <el-descriptions-item label="客户经理："
            >{{ state.custom }}
          </el-descriptions-item>
          <el-descriptions-item label="运营经理："
            >{{ state.option_custom }}
          </el-descriptions-item>
          <el-descriptions-item label="当前余额："
            >¥{{ state.current_balance }}
          </el-descriptions-item>
          <el-descriptions-item label="门店备注："
            >{{ state.store_note }}
          </el-descriptions-item>
          <el-descriptions-item label="充值金额："
            ><span  style="color:red;">¥{{ state.recharge_amount }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="3、上传附件">
          <el-descriptions-item>
            <el-image
              style="width: 100px; height: 100px"
              :src="state.img_src"
              :fit="fit"
              :preview-src-list="state.img_preview"
            ></el-image>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="4、充值备注" :direction="vertical">
          <el-descriptions-item>
            <el-form ref="mult_form" :model="state.form" :rules="state.rules">
              <el-form-item label="操作密码：" prop="password">
                <el-col :span="8"
                  ><el-input
                    type="password"
                    v-model="state.form.password"
                  ></el-input
                ></el-col>
              </el-form-item>
              <el-form-item style="margin-left:10px;" label="审核说明：">
                <el-col :span="8"
                  ><el-input
                    type="textarea"
                    v-model="state.form.approve_tip"
                  ></el-input
                ></el-col>
              </el-form-item>
            </el-form>
          </el-descriptions-item>
        </el-descriptions>
        <el-row type="flex" justify="center">
          <el-col :span="4">
            <el-button type="danger" @click="optionBtn('拒绝')">拒绝</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="optionBtn('通过')">通过</el-button>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
import searchDiv from "@/components/Search.vue";
import Page from "@/components/Pagination.vue";
import { ElNotification } from "element-plus";
export default {
    name:"recharge_approve",
  components: { searchDiv, Page },
  props: {},
  setup() {
    const { ctx } = getCurrentInstance();
    let mult_form = ref("null");
    let state = reactive({
      placeholder: "请输入您要搜索的",
      status: "",
      drawer: false,
      keyword: "",
      page: 1,
      totalPage: "",
      verify_status: "",
      custom: "", //客户经理
      option_custom: "", //运营经理
      current_balance: "",
      store_note: "",
      recharge_amount: "",
      img_src: "",
      img_preview: [],
      form: {
        password: "",
        approve_tip: "",
      },
      rules: {
        password: [{ required: true, message: "请输入操作密码", trigger: "blur" }]
      },
      tableData: [],
    });
    onMounted(() => {
      getOrderlist();
    });
    // 关键字
    function searchClick(e) {
      state.keyword = e;
      getOrderlist();
    }
    // 获取数据
    function getOrderlist() {
      ctx.$http
        .post("/tanxiaji/store/recharge/record/", {
          page: state.page,
          type: state.status,
          keywords: state.keyword,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.tableData = res.data.records;
            state.totalPage = res.data.all_pages;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 审核
    function approve(item) {
      state.common_id = item.id;
      get_approve_detail(item.id);
    }
    // 获取审核数据
    function get_approve_detail(id) {
      ctx.$http
        .get("/tanxiaji/store/recharge/detail/", {
          record_id: id,
        })
        .then((res) => {
          if (res.errno == 0) {
            let list = res.data;
            state.img_preview = [];
            state.drawer = true;
            state.custom = list.marketing_manager; //客户经理
            state.option_custom = list.service_manager; //运营经理
            state.current_balance = list.balance;
            state.store_note = list.store_info_not;
            state.recharge_amount = list.amount;
            state.img_src = ctx.$http.IMG_HOST + list.voucher;
            state.img_preview.push(ctx.$http.IMG_HOST + list.voucher);
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 关闭的回调
    function handleClose(done){
        clearForm();
        done();
    }
    // 清除表单相关遗留数据
    function clearForm(){
            state.custom = ''; //客户经理
            state.option_custom = ''; //运营经理
            state.current_balance = '';
            state.store_note = '';
            state.recharge_amount = '';
            state.img_src = '';
            state.form.password='';
            state.form.approve_tip='';
    }
    // 同意///拒绝
    function optionBtn(type) {
        let url='';
        if(type=='通过'){
            url='/tanxiaji/store/recharge/accept/'
        }else{
                    url='/tanxiaji/store/recharge/reject/'
        }
      mult_form.value.validate((valid) => {
        if (valid) {
          ctx.$http
            .post(url, {
              recharge_id: state.common_id,
              opt_pass: state.form.password,
              note: state.form.approve_tip,
            })
            .then((res) => {
              if (res.errno == 0) {
                ElNotification.success(res.errmsg);
                state.drawer = false;
                getOrderlist();
                handleClose()
              } else {
                ElNotification.error(res.errmsg);
              }
            })
            .catch((err) => {
              ElNotification.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // 分页
    function changePage(e) {
      state.page = e;
      getOrderlist();
    }
    // 创建仓库
    return {
    handleClose,
        mult_form,
      state,
      optionBtn,
      searchClick,
      changePage,
      approve,
      getOrderlist,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  .conTxt {
    padding: 0 30px;
    /deep/ .el-descriptions {
      margin: 20px 0;
    }
    /deep/ .el-descriptions__title {
      color: #8c8c8c;
    }
  }
  .el-card {
    height: 100%;
    .rowDiv {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .row-left {
        display: flex;
        align-items: center;
        white-space: nowrap;
      }
      .row-item {
        display: flex;
        align-items: center;
      }
    }
    .el-table /deep/ th {
      background-color: #eaeaea;
      text-align: center;
    }
    .el-table /deep/ td {
      text-align: center;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>